<template>
  <div>
    <div class="box">
      <div class="top">
        <div class="title">
          <div class="iconfont icon-success"></div>
          <div>支付成功</div>
        </div>
      </div>

      <div class="list">
        <div class="ul">
          <div class="li">
            <div class="left">订单编号：</div>
            <div class="right">5234875654312</div>
          </div>
          <div class="li">
            <div class="left">下单时间：</div>
            <div class="right">2020-04-23 11:36:18</div>
          </div>
          <div class="li">
            <div class="left">支付方式：</div>
            <div class="right">微信支付</div>
          </div>
          <div class="li">
            <div class="left">订单状态：</div>
            <div class="right">下单成功即将发货</div>
          </div>
        </div>
      </div>

      <div class="btn">
        <button class="divOrder">查看订单</button>
        <button class="continue">继续购物</button>
      </div>

      <div class="Voucher">
        <div class="left">
          <div class="title">恭喜您获得10大元红包</div>
          <div class="text">邀请好友得更多</div>
          <div class="Voucher-btn">去领取</div>
        </div>
        <div class="right">
          <img src="https://z3.ax1x.com/2021/05/09/gYwcCT.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.box {
  overflow: hidden;
  background: #EFEFEF;
  .top {
    width: 100%;
    height: 200px;
    background: #f65751;
    position: relative;
    margin-bottom: 100px;
    &::after {
      display: block;
      content: "";
      width: 140%;
      height: 100%;
      margin-left: -20%;
      background: #f65751;
      border-radius: 50%;
      position: absolute;
      left: 0px;
      top: 100px;
    }
    .title {
      color: #ffffff;
      font-size: 44px;
      font-weight: 600;
      text-align: center;
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: -40px;
      z-index: 100;
      .iconfont {
        font-size: 100px;
        margin-bottom: 20px;
      }
    }
  }

  .list {
    width: 80%;
    margin: 0 auto;
    .ul .li {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      font-size: 24px;
      .left {
        color: #898a8c;
      }
      .right {
        color: #464749;
        font-weight: bold;
      }
    }
  }

  .btn {
    width: 80%;
    display: flex;
    justify-content: space-evenly;
    margin: 0px auto;
    font-size: 24px;
    button {
      margin: 60px 20px !important;
      font-weight: 500;
      border-radius: 12px;
      &.viewOrder {
        color: #f65751;
        border: 4px solid #f65751;
      }
      &.continue {
        color: #ffffff;
        background: #f65751;
      }
    }
  }

  .Voucher {
    width: 80%;
    margin: 0px auto;
    background: #faf3eb;
    // background: red;
    position: relative;
    padding: 20px 40px;
    margin-bottom: 50px;
    .left {
      .title {
        font-size: 30px;
        font-weight: 600;
        color: #333;
      }
      .text {
        font-size: 28px;
        margin-top: 5px;
        margin-bottom: 10px;
        color: #9d9998;
      }
      .Voucher-btn {
        display: inline;
        padding: 10px 20px;
        background: #fee998;
        color: #e89402;
        border-radius: 10px;
        font-size: 24px;
      }
    }
    .right {
      width: 150px;
      height: 150px;
      position: absolute;
      right: 0px;
      top: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
